<template>
	<div class="dashboard">
		<div class="content">
			<div class="top-container">
				<div class="nav-container">
					<div class="nav-btn-item nav-btn-active">综合统计</div>
					<div class="nav-btn-item" @click="handleNavBtnClick('/page2')">运营情况</div>
					<div class="nav-btn-item" @click="handleNavBtnClick('/page3')">工程情况</div>
				</div>
				<div class="logo-container">
					<img
						class="logo-img"
						src="./images/logoText.png"
						alt="logo"
					/>
				</div>
				<div class="time-container">
                    <img class="time-icon-img1" src="./images/weather.png" alt="weather" />
                    <div class="weather-display-text1">晴</div>
                    <img class="line-img" src="./images/line.png" alt="weather" />
                    <div class="weather-display-text">
                        <div>西北风2级</div>
                        <div>紫外线指数：2</div>
                    </div>
                    <img class="line-img" src="./images/line.png" alt="weather" />
                    <div class="weather-display-text">
                        <div>温度：29°</div>
                        <div>体感：29°</div>
                    </div>
                    <!-- <div class="time-icon-wrapper">
                        <img class="time-icon-img" src="./images/time.png" alt="time" />
                    </div> -->
                    <!-- <div class="time-display-text">11:15</div> -->
                    <div class="date-info-wrapper">
                        <div class="date-text">2021年04月25日</div>
                        <div class="week-text">星期四: <img class="time-icon-img" src="./images/time.png" alt="time" />11:15</div>
                    </div>
					<div class="dropdown-wrapper" @mouseenter="showDropdown = true" @mouseleave="showDropdown = false">
						<div class="dropdown-arrow">
							<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M7 10L12 15L17 10H7Z" fill="#fff" />
							</svg>
						</div>
						<transition name="dropdown-fade">
							<div v-show="showDropdown" class="dropdown-panel" @click.stop>
								<div class="close-btn" @click="showDropdown = false">✕</div>
								<div class="dropdown-item" @click="selectOption(1)">选项 1</div>
								<div class="dropdown-item" @click="selectOption(2)">选项 2</div>
								<div class="dropdown-item" @click="selectOption(3)">选项 3</div>
							</div>
						</transition>
					</div>
                </div>
            </div>
			<div class="echart-container">
				<div class="echart-box-left">
					<Page1ItemBox1 
						ref="itemBox1" 
						:supplyData="pageData1"
					/>
					<Page1ItemBox2 
						ref="itemBox2" 
						:chartData="pageData2"
					/>
					<Page1ItemBox3 
						ref="itemBox3" 
						:chartData="pageData3"
					/>
					<Page1ItemBox4 
						ref="itemBox4" 
						:storageData="pageData4"
					/>
					<Page1ItemBox5 
						ref="itemBox5" 
						:chartData="pageData5"
					/>
					<Page1ItemBox6 
						ref="itemBox6" 
						:chartData="pageData6"
					/>
				</div>
				<div class="echart-box-center">
					<div class="command-center-wrapper">
						<div class="command-center-stats">
							<div
								class="stat-item"
								v-for="(item, index) in summaryData"
								:key="index"
							>
								<div class="stat-value">
									{{ item.value
									}}<span class="stat-unit">{{
										item.unit
									}}</span>
								</div>
								<div class="stat-label">{{ item.label }}</div>
							</div>
						</div>
					</div>

                    <div class="page1-centet-wrapper">
                        <Page1Centet 
                            ref="page1Centet"
                            :companiesData="companiesData"
                        />
                    </div>
				</div>
                
				<div class="echart-box-right">
					<Page1ItemBox7 
						ref="itemBox7" 
						:chartData="pageData7"
					/>
					<Page1ItemBox8 
						ref="itemBox8" 
						:chartData="pageData8"
					/>
					<Page1ItemBox9 
						ref="itemBox9" 
						:chartData="pageData9"
					/>
					<Page1ItemBox10 
						ref="itemBox10" 
						:chartData="pageData10"
					/>
					<Page1ItemBox11 
						ref="itemBox11" 
						:securityData="pageData11"
					/>
					<Page1ItemBox12 
						ref="itemBox12" 
						:monitorData="pageData12"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Page1ItemBox1 from "./components/page1/page1-item-box-1.vue";
import Page1ItemBox2 from "./components/page1/page1-item-box-2.vue";
import Page1ItemBox3 from "./components/page1/page1-item-box-3.vue";
import Page1ItemBox4 from "./components/page1/page1-item-box-4.vue";
import Page1ItemBox5 from "./components/page1/page1-item-box-5.vue";
import Page1ItemBox6 from "./components/page1/page1-item-box-6.vue";
import Page1ItemBox7 from "./components/page1/page1-item-box-7.vue";
import Page1ItemBox8 from "./components/page1/page1-item-box-8.vue";
import Page1ItemBox9 from "./components/page1/page1-item-box-9.vue";
import Page1ItemBox10 from "./components/page1/page1-item-box-10.vue";
import Page1ItemBox11 from "./components/page1/page1-item-box-11.vue";
import Page1ItemBox12 from "./components/page1/page1-item-box-12.vue";
import Page1Centet from "./components/page1/page1-centet.vue";

export default {
	name: "Page1",
	data() {
		return {
			// 下拉选择器状态
			showDropdown: false,
			selectedOption: null,
			// 组件1: 当日供应
			pageData1: {
				planned: { value: 999999, unit: "万/m³", label: "计划供应量" },
				actual: { value: 999999, unit: "万/m³", label: "实际供应量" }
			},
			// 组件2: 供应统计 (3D柱状图 - 12个月数据)
			pageData2: [
				{ name: "1月", value: 850 },
				{ name: "2月", value: 750 },
				{ name: "3月", value: 900 },
				{ name: "4月", value: 950 },
				{ name: "5月", value: 800 },
				{ name: "6月", value: 900 },
				{ name: "7月", value: 950 },
				{ name: "8月", value: 750 },
				{ name: "9月", value: 500 },
				{ name: "10月", value: 600 },
				{ name: "11月", value: 700 },
				{ name: "12月", value: 550 }
			],
			// 组件3: 销气统计 (渐变折线图 - 12日数据)
			pageData3: [
				{ name: "1日", value: 250 },
				{ name: "2日", value: 680 },
				{ name: "3日", value: 280 },
				{ name: "4日", value: 650 },
				{ name: "5日", value: 450 },
				{ name: "6日", value: 200 },
				{ name: "7日", value: 400 },
				{ name: "8日", value: 900 },
				{ name: "9日", value: 180 },
				{ name: "10日", value: 180 },
				{ name: "11日", value: 200 },
				{ name: "12日", value: 400 }
			],
			// 组件4: 存量情况 (双图表)
			pageData4: {
				storage1: {
					title: "管存量",
					value: 999999,
					unit: "万/m³",
					subtitle: "管存占比",
					percentage: 32
				},
				storage2: {
					title: "管存量", 
					value: 999999,
					unit: "万/m³",
					subtitle: "管存占比",
					percentage: 78
				}
			},
			// 组件5: 工程统计 (3D柱状图 - 7个月数据)
			pageData5: [
				{ name: "1月", value: 340 },
				{ name: "2月", value: 480 },
				{ name: "3月", value: 320 },
				{ name: "4月", value: 410 },
				{ name: "5月", value: 340 },
				{ name: "6月", value: 270 },
				{ name: "7月", value: 450 }
			],
			// 组件6: 工程信息 (3D饼图 - 6种工程类型)
			pageData6: [
				{ name: "中央资金", value: 41, color: "#0115b477" },
				{ name: "非民用工程", value: 32, color: "#495dff77" },
				{ name: "国债资金", value: 41, color: "#3190ff77" },
				{ name: "小微工程", value: 15, color: "#7laaff77" },
				{ name: "小区工程", value: 39, color: "#69cde777" },
				{ name: "液改气工程", value: 2, color: "#cbebff77" }
			],
			// 组件7: 客户统计 (3D饼图 - 民用户vs非民用户)
			pageData7: [
				{ name: "民用户", value: 1230, color: "#005cc577" },
				{ name: "非民用户", value: 1000, color: "#93d4fa77" }
			],
			// 组件8: 具表统计 (横向条形图)
			pageData8: [
				{ name: "物联网表", value: 582 },
				{ name: "IC卡表", value: 421 },
				{ name: "机械表", value: 747 }
			],
			// 组件9: 热线情况 (柱状图 - 12个月数据)
			pageData9: [
				{ name: "1月", value: 200 },
				{ name: "2月", value: 240 },
				{ name: "3月", value: 200 },
				{ name: "4月", value: 170 },
				{ name: "5月", value: 240 },
				{ name: "6月", value: 120 },
				{ name: "7月", value: 170 },
				{ name: "8月", value: 150 },
				{ name: "9月", value: 130 },
				{ name: "10月", value: 120 },
				{ name: "11月", value: 150 },
				{ name: "12月", value: 120 }
			],
			// 组件10: 业务处理 (折线图 - 6个月数据)
			pageData10: [
				{ name: "1月", value: 700 },
				{ name: "2月", value: 500 },
				{ name: "3月", value: 650 },
				{ name: "4月", value: 628 },
				{ name: "5月", value: 500 },
				{ name: "6月", value: 620 }
			],
			// 组件11: 安检进度
			pageData11: {
				totalCount: 999999,
				completionRate: 58,
				yearlyTotal: 10000,
				completedCount: 5800
			},
			// 组件12: 安全监测点
			pageData12: [
				{ title: "哨兵点位", value: 999999, unit: "个" },
				{ title: "压力监测点位", value: 999999, unit: "个" },
				{ title: "SCADA设备", value: 999999, unit: "个" }
			],
			// 中央综合统计数据
			summaryData: [
				{ value: "1268", unit: "km", label: "管网长度" },
				{ value: "368", unit: "个", label: "调压设施" },
				{ value: "6947", unit: "万/m³", label: "年销气总量" },
				{ value: "286", unit: "个", label: "场站数量" },
				{ value: "692", unit: "户", label: "用户数量" }
			],
			// 飞线图公司数据
			companiesData: [
				{
					name: '长春市燃气', 
					coord: [750, 750], 
					isCenter: true,
					pipelineLength: 1580.5,
					regulatingFacilities: 156,
					annualGasSales: 28.6,
					stationCount: 12,
					userCount: 158000
				},
				{
					name: '德惠公司', 
					coord: [950, 850],
					pipelineLength: 456.8,
					regulatingFacilities: 45,
					annualGasSales: 8.9,
					stationCount: 5,
					userCount: 42000
				},
				{
					name: '双阳公司', 
					coord: [800, 660],
					pipelineLength: 389.2,
					regulatingFacilities: 38,
					annualGasSales: 7.2,
					stationCount: 4,
					userCount: 35000
				},
				{
					name: '公主岭公司', 
					coord: [560, 630],
					pipelineLength: 523.6,
					regulatingFacilities: 52,
					annualGasSales: 10.5,
					stationCount: 6,
					userCount: 48000
				},
				{
					name: '长白山分公司', 
					coord: [1100, 300],
					pipelineLength: 234.5,
					regulatingFacilities: 28,
					annualGasSales: 4.8,
					stationCount: 3,
					userCount: 22000
				},
				{
					name: '龙井分公司', 
					coord: [1550, 450],
					pipelineLength: 187.3,
					regulatingFacilities: 22,
					annualGasSales: 3.6,
					stationCount: 2,
					userCount: 18000
				},
				{
					name: '图们分公司', 
					coord: [1580, 500],
					pipelineLength: 198.7,
					regulatingFacilities: 24,
					annualGasSales: 4.1,
					stationCount: 3,
					userCount: 19500
				},
				{
					name: '延边分公司', 
					coord: [1500, 530],
					pipelineLength: 312.4,
					regulatingFacilities: 35,
					annualGasSales: 6.8,
					stationCount: 4,
					userCount: 31000
				},
				{
					name: '琿春分公司', 
					coord: [1700, 580],
					pipelineLength: 156.9,
					regulatingFacilities: 18,
					annualGasSales: 2.9,
					stationCount: 2,
					userCount: 15000
				}
			]
		};
	},
	components: {
		Page1ItemBox1,
		Page1ItemBox2,
		Page1ItemBox3,
		Page1ItemBox4,
		Page1ItemBox5,
		Page1ItemBox6,
		Page1ItemBox7,
		Page1ItemBox8,
		Page1ItemBox9,
		Page1ItemBox10,
		Page1ItemBox11,
		Page1ItemBox12,
        Page1Centet
	},
	mounted() {
		this.pageinit();
	},
	methods: {
		pageinit() {
			this.$nextTick(() => {
				// 调用所有组件的初始化方法
				this.$refs.itemBox1.initChart();
				this.$refs.itemBox2.initChart();
				this.$refs.itemBox3.initChart();
				this.$refs.itemBox4.initChart();
				this.$refs.itemBox5.initChart();
				this.$refs.itemBox6.initChart();
				this.$refs.itemBox7.initChart();
				this.$refs.itemBox8.initChart();
				this.$refs.itemBox9.initChart();
				this.$refs.itemBox10.initChart();
				this.$refs.itemBox11.initChart();
				this.$refs.itemBox12.initChart();
				this.$refs.page1Centet.initChart();
			});
		},
        handleNavBtnClick(path) {
            this.$router.push({
                path: path
            });
        },
		selectOption(value) {
			this.selectedOption = value;
			this.showDropdown = false;
			console.log('选择了选项:', value);
			// 在这里可以添加选项选择后的逻辑
		}
	}
};
</script>

<style scoped lang="scss">
// SCSS 变量定义
$dashboard-width: 5408px;
$dashboard-height: 1560px;
$primary-color: #fff;
$secondary-color: rgba(255, 255, 255, 0.8);
$tertiary-color: rgba(255, 255, 255, 0.6);

// 重置样式
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

// 主容器
.dashboard {
	width: $dashboard-width;
	height: $dashboard-height;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	background: {
		image: url("./images/bg02.jpg");
		size: 100% 100%;
		repeat: no-repeat;
		position: center center;
	}
}

// 内容容器
.content {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	background: {
		image: url("./images/top.png");
		size: 100% 100%;
		repeat: no-repeat;
		position: center center;
	}
}

// 顶部容器
.top-container {
	width: 100%;
	height: 146px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 110px;
	position: relative;
}

// 导航容器
.nav-container {
	display: flex;
	gap: 24px;
}

// 导航按钮
.nav-btn-item {
	width: 280px;
	height: 110px;
	background: {
		image: url("./images/navBtnNormal.png");
		size: 100% 100%;
		repeat: no-repeat;
	}
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	color: $primary-color;
	cursor: pointer;
}

// 激活状态的导航按钮
.nav-btn-active {
	background-image: url("./images/navBtn.png");
}

// Logo容器
.logo-container {
	position: absolute;
	left: calc(50% + 73px);
	transform: translateX(-50%);
	top: 23px;

	.logo-img {
		height: 116px;
	}
}

// 时间容器
.time-container {
  display: flex;
  align-items: center;
  gap: 24px;

  .time-icon-img {
    width: 25px;
    height: 25px;
  }
  .time-icon-img1 {
    width: 70px;
    height: 70px;
  }
  .time-display-text {
    font-size: 59px;
    color: $primary-color;
    font-weight: bold;
    margin-right: 24px;
  }
 .weather-display-text {
    font-size: 26px;
    color: $primary-color;
    font-weight: bold;
    margin-right: 24px;
  }
  .weather-display-text1 {
    font-size: 36px;
    color: $primary-color;
    font-weight: bold;
    margin-right: 24px;
  }
  .date-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;

    .date-text {
      font-size: 24px;
      color: $secondary-color;
    }

    .week-text {
      font-size: 22px;
      color: $tertiary-color;
    }
  }
}

// 图表容器
.echart-container {
	display: flex;
	padding: 6px 122px 0;
	justify-content: space-between;
	.echart-show {
		width: 100%;
		height: 100%;
	}
	// 待实现的样式
	.echart-box-left {
		width: 1402px;
		display: flex;
		flex-wrap: wrap;
		gap: 30px 70px;
	}
	.echart-box-right {
		width: 1402px;
		display: flex;
		flex-wrap: wrap;
		gap: 27px 70px;
	}
}

// 综合调度指挥中心样式
.echart-box-center {
	width: 1960px;
	display: flex;
    flex-direction: column;
    align-items: center;
	margin: 100px 30px 0;
}

.command-center-wrapper {
	width: 1300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30px;
}

.command-center-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 40px;
}

.center-logo {
	width: 100px;
	height: auto;
	margin-bottom: 10px;
}

.title-text {
	font-size: 48px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 15px rgba(0, 212, 255, 0.7);
	letter-spacing: 2px;
}

.command-center-stats {
	display: flex;
	justify-content: space-around;
	width: 100%;
	margin-top: 20px;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 15px;
}

.stat-value {
	font-size: 54px;
	font-weight: bold;
	margin-bottom: 10px;
}

.stat-item:nth-child(1) .stat-value {
	color: #f5e17a;
}

.stat-item:nth-child(2) .stat-value {
	color: #3cffb3;
}

.stat-item:nth-child(3) .stat-value {
	color: #6ad4ff;
}

.stat-item:nth-child(4) .stat-value {
	color: #a2c4ff;
}

.stat-item:nth-child(5) .stat-value {
	color: #ffb88c;
}

.stat-unit {
	font-size: 24px;
	margin-left: 5px;
}

.stat-label {
	font-size: 24px;
	color: #fff;
}

.page1-centet-wrapper {
	flex: 1;
    width: 100%;
}

// 下拉选择器样式
.dropdown-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: 20px;
}

.dropdown-arrow {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 8px;
	background: linear-gradient(135deg, rgba(1, 74, 147, 0.6), rgba(49, 144, 255, 0.4));
	border: 1px solid rgba(49, 144, 255, 0.6);
	box-shadow: 0 0 10px rgba(49, 144, 255, 0.3);
	transition: all 0.3s ease;

	&:hover {
		background: linear-gradient(135deg, rgba(1, 74, 147, 0.8), rgba(49, 144, 255, 0.6));
		box-shadow: 0 0 15px rgba(49, 144, 255, 0.5);
		transform: translateY(2px);
	}

	svg {
		filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
	}
}

.dropdown-panel {
	position: absolute;
	top: 60px;
	right: 0;
	min-width: 200px;
	background: linear-gradient(180deg, rgba(0, 30, 60, 0.95), rgba(1, 74, 147, 0.95));
	border: 1px solid rgba(49, 144, 255, 0.6);
	border-radius: 10px;
	padding: 45px 15px 15px 15px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 
				0 0 20px rgba(49, 144, 255, 0.4),
				inset 0 1px 0 rgba(255, 255, 255, 0.1);
	z-index: 1000;
	backdrop-filter: blur(10px);
}

.close-btn {
	position: absolute;
	top: 8px;
	right: 12px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.7);
	font-size: 24px;
	font-weight: bold;
	border-radius: 50%;
	transition: all 0.3s ease;
	background: rgba(49, 144, 255, 0.2);

	&:hover {
		color: #fff;
		background: rgba(255, 59, 48, 0.6);
		box-shadow: 0 0 10px rgba(255, 59, 48, 0.5);
		transform: rotate(90deg);
	}
}

.dropdown-item {
	padding: 15px 20px;
	margin-top: 10px;
	font-size: 22px;
	color: rgba(255, 255, 255, 0.9);
	cursor: pointer;
	border-radius: 6px;
	background: rgba(49, 144, 255, 0.15);
	border: 1px solid rgba(49, 144, 255, 0.3);
	transition: all 0.3s ease;
	text-align: center;

	&:first-of-type {
		margin-top: 0;
	}

	&:hover {
		background: linear-gradient(90deg, rgba(49, 144, 255, 0.4), rgba(49, 144, 255, 0.25));
		border-color: rgba(49, 144, 255, 0.8);
		color: #fff;
		box-shadow: 0 0 15px rgba(49, 144, 255, 0.4),
					inset 0 0 10px rgba(49, 144, 255, 0.2);
		transform: translateX(3px);
	}

	&:active {
		transform: scale(0.98) translateX(3px);
	}
}

// 下拉动画
.dropdown-fade-enter-active, .dropdown-fade-leave-active {
	transition: all 0.3s ease;
}

.dropdown-fade-enter-from {
	opacity: 0;
	transform: translateY(-10px) scale(0.95);
}

.dropdown-fade-leave-to {
	opacity: 0;
	transform: translateY(-5px) scale(0.98);
}

.dropdown-fade-enter-to, .dropdown-fade-leave-from {
	opacity: 1;
	transform: translateY(0) scale(1);
}
</style>